<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
// import type { WafBindNodeIds } from '@/apis/model/waf'
import {
  getCdnNodeTreeApi,
  getCdnNodeWafBindingsApi,
  updateCdnNodeWafBindApi,
} from '@/apis/modules/cdn'
// import {
//   getApiWafBindNodeIdsApi,
//   updateApiWafBindApi,
// } from '@/apis/modules/waf'
// import { updateSwitcherApi } from '@/apis/modules/switch'
import DeployTree from './DeployTree.vue'

const props = withDefaults(defineProps<IProps>(), {
  visible: false,
})
const emits = defineEmits<IEmits>()
const route = useRoute()
// const id = ref(props.record?.id)
const originTreeData = ref([])
interface IEmits {
  (e: 'update:visible', value: boolean): void
  (e: 'refresh'): void
}
interface IProps {
  visible: boolean
  record?: any
}
const targetValue = ref([])
const { run, loading } = useListRequest(getCdnNodeTreeApi, {
  afterFn(res) {
    console.log(res)
    originTreeData.value = transformToTree(res)
  },
})

function getCdnNodeWafBindingsList() {
  getCdnNodeWafBindingsApi({ waf_id: props.record?.id }).then((res) => {
    targetValue.value = res.node_ids || []
  })
  // useRequest(getCdnNodeWafBindingsApi, {
  //   auto: true,
  //   params: { id: props.record?.id },
  //   success(res: WafBindNodeIds) {

  //   },
  // })
}

const saveLoading = ref(false)

async function handleSubmit() {
  saveLoading.value = true
  await updateCdnNodeWafBindApi({
    waf_id: props.record?.id as string,
    node_ids: targetValue.value,
  })
  Message.success('操作成功')
  emits('update:visible', false)
  emits('refresh')
  run()
  saveLoading.value = false
}

async function handleBeforeOpen() {
  await run()
  getCdnNodeWafBindingsList()
  // if (props.record)
  //   request({ id: props.record?.id })
}
async function handleBeforeClose() {
  // await formRef.value?.resetFields()
  // matchingView.value?.reset()
  emits('update:visible', false)
}
</script>

<template>
  <a-drawer
    :visible="visible"
    title="调整部署"
    ok-text="保存"
    width="1000px"
    :loading="saveLoading"
    @ok="handleSubmit"
    @open="handleBeforeOpen"
    @close="handleBeforeClose"
    @cancel="emits('update:visible', false)"
  >
    <!-- <template #header>

    </template> -->
    <div>
      <div class="deploy-title">
        规则名称 <span class="sub-title">{{ record?.name }}</span>
      </div>
    </div>
    <a-divider
      class="!my-6"
      type="dashed"
    />
    <section
      class="flex flex-col"
      :loading="loading"
    >
      <deploy-tree
        v-model:target="targetValue"
        :data="originTreeData"
      />
    </section>
  </a-drawer>
</template>

<style lang="less" scoped>
.deploy-title {
  color: var(--text-3, #86909c);
  /* regular/12 */
  font-family: 'Microsoft YaHei UI';
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

  .sub-title {
    margin-left: 24px;
    color: var(--text-1, #1d2129);
    /* regular/12 */
    font-family: 'Microsoft YaHei UI';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}
</style>
